<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="simulate-home">
            <el-row type="flex" :gutter="20">
                <el-col :span="8">
                    <div class="grid-content">
                        <el-form :model="dvcForm" ref="dvcForm" label-width="80px" class="demo-ruleForm">
                            <el-form-item label="托盘条码" prop="contNo">
                                <el-input v-model="dvcForm.contNo" autocomplete="off" maxlength="32" clearable></el-input>
                            </el-form-item>

                            <el-form-item label="设备编号" prop="dvcNo">
                                <el-select v-model="dvcForm.dvcNo" placeholder="请选择入库设备">
                                    <el-option v-for="item in dvcOptions" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <div class="grid-button">
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('BCR')">货位分配</el-button>
                                    <el-button @click="resetForm('dvcForm')">重置</el-button>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </el-col>

                <el-col :span="8">
                    <div class="grid-content">
                        <el-form :model="arriveForm" ref="noticeForm" label-width="80px" class="demo-ruleForm">
                            <el-form-item label="放行站点" prop="stationNo">
                                <el-select v-model="noticeForm.stationNo" placeholder="请选择站点">
                                    <el-option v-for="item in stationOptions" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="放行数量" prop="amount">
                                <el-input-number v-model="noticeForm.amount" :min="1" :max="2"></el-input-number>
                            </el-form-item>
                            <div class="grid-button">
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('NOTICE')">模拟放行</el-button>
                                    <el-button @click="resetForm('noticeForm')">重置</el-button>
                                </el-form-item>
                            </div>

                        </el-form>
                    </div>
                </el-col>
            </el-row>
            <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
            <el-row type="flex" :gutter="20">
                <el-col :span="8">
                    <div class="grid-content">
                        <el-form :model="locateForm" ref="locateForm" label-width="80px" class="demo-ruleForm">
                            <el-form-item label="托盘条码" prop="contNo">
                                <el-input v-model="locateForm.contNo" autocomplete="off" maxlength="32"></el-input>
                            </el-form-item>
                            <el-form-item label="货位编号" prop="locateNo">
                                <el-input v-model="locateForm.locateNo" autocomplete="off"></el-input>
                            </el-form-item>
                            <div class="grid-button">
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('UP')">上架</el-button>
                                    <el-button type="primary" @click="submitForm('DOWN')">下架</el-button>
                                    <el-button @click="resetForm('locateForm')">重置</el-button>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </el-col>

                <el-col :span="8">
                    <div class="grid-content">
                        <el-form :model="arriveForm" ref="arriveForm" label-width="80px" class="demo-ruleForm">
                            <el-form-item label="托盘条码" prop="contNo">
                                <el-input v-model="arriveForm.contNo" autocomplete="off" maxlength="32"></el-input>
                            </el-form-item>
                            <el-form-item label="站台编号" prop="stationNo">
                                <el-input v-model="arriveForm.stationNo" autocomplete="off"></el-input>
                            </el-form-item>
                            <div class="grid-button">
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('ARRIVE')">模拟到达</el-button>
                                    <el-button @click="resetForm('arriveForm')">重置</el-button>
                                </el-form-item>
                            </div>

                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
    </el-card>
</template>
<script>
export default {
    data() {
        return {
            operateForm: {
                simulateType: '',
                contNo: '',
                positionNo: '',
            },
            dvcForm: {
                contNo: '',
                dvcNo: '',
            },
            locateForm: {
                contNo: '',
                locateNo: '',
            },
            arriveForm: {
                contNo: '',
                stationNo: '',
            },
            noticeForm: {
                stationNo: '',
                amount: '2',
            },
            dvcOptions: [
                {
                    value: 'TC01',
                    label: '1号堆垛机'
                }, {
                    value: 'TC02',
                    label: '2号堆垛机'
                }, {
                    value: 'TC03',
                    label: '3号堆垛机'

                }
            ],
            stationOptions: [
                {
                    value: '2F_NOTICE_ST21',
                    label: '1号放行口'
                }, {
                    value: '2F_NOTICE_ST22',
                    label: '2号放行口'
                }, {
                    value: '2F_NOTICE_ST23',
                    label: '3号放行口'

                },
                {
                    value: '2F_NOTICE_ST24',
                    label: '4号放行口'

                }
            ],
        }
    },
    methods: {
        submitForm(operation) {
            this.operateForm.simulateType = operation
            // 数据收集(扫码、上架、到达)
            if (operation == 'BCR') {
                if (!this.dvcForm.contNo || !this.dvcForm.dvcNo) {
                    return this.$message({
                        message: this.$t('prompt.simulateByBcr'),
                        type: 'warning',
                        duration: 1000
                    })
                }
                this.operateForm.contNo = this.dvcForm.contNo
                this.operateForm.positionNo = this.dvcForm.dvcNo
            }
            if (operation == 'UP' || operation == 'DOWN') {
                if (!this.locateForm.contNo || !this.locateForm.locateNo) {
                    return this.$message({
                        message: this.$t('prompt.simulateByLocate'),
                        type: 'warning',
                        duration: 1000
                    })
                }
                this.operateForm.contNo = this.locateForm.contNo
                this.operateForm.positionNo = this.locateForm.locateNo
            }
            if (operation == 'ARRIVE') {
                if (!this.arriveForm.contNo || !this.arriveForm.stationNo) {
                    return this.$message({
                        message: this.$t('prompt.simulateByArrive'),
                        type: 'warning',
                        duration: 1000
                    })
                }
                this.operateForm.contNo = this.arriveForm.contNo
                this.operateForm.positionNo = this.arriveForm.stationNo
            }
            if (operation == 'NOTICE') {
                if (!this.noticeForm.stationNo || !this.noticeForm.amount) {
                    return this.$message({
                        message: this.$t('prompt.simulateByNotice'),
                        type: 'warning',
                        duration: 1000
                    })
                }
                this.operateForm.contNo = this.noticeForm.amount
                this.operateForm.positionNo = this.noticeForm.stationNo
            }

            this.$confirm(this.$t('prompt.info', { 'handle': this.$t('simulate') }), this.$t('prompt.title'), {
                confirmButtonText: this.$t('confirm'),
                cancelButtonText: this.$t('cancel'),
                type: 'warning'
            }).then(() => {
                this.$http.post('/wms/simulate', this.operateForm).then(({ data: res }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.$message({
                        message: res.msg,
                        type: 'success',
                        duration: 500,
                        onClose: () => {

                        }
                    })
                }).catch(() => { })
            }).catch(() => { })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style>
.simulate-home {
    /* margin-top: 5px; */
    line-height: 1.5;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    width: 250px;
}

.grid-button {
    width: 350px;
}
</style>
  